#app {
	.main-container {
		min-height: 100vh;
		transition: margin-left 0.28s;
		margin-left: $sideBarWidth;
		position: relative;
		background: #f0f2f5;

		.el-scrollbar__wrap {
			overflow: auto;
			height: 100%;
		}
	}

	/* siadebar容器 */
	.sidebar-container {
		transition: width 0.28s;
		width: $sideBarWidth !important;
		background: $menuBg;
		height: 100%;
		position: fixed;
		font-size: 0px;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 1001;
		overflow: hidden;
		box-shadow: 0 0 1px #888;

		/* 设置高度及仅垂直方向的滚动条 */
		.el-scrollbar {
			height: 100%;
		}
		/* 隐藏水平滚动条 */
		.scrollbar-wrapper {
			overflow-x: hidden !important;
		}
		.is-horizontal {
			display: none;
		}

		// 设置菜单容器默认为sidebar背景
		.el-menu {
			border: none;
			height: 100%;
			background-color: transparent !important;
		}
		// 设置所有菜单 静态文字展示、Hover文字展示
		.el-menu-item,
		.el-submenu__title {
			height: 50px;
			color: $menuText;
			padding: 0 20px 0 40px;
			&:hover {
				color: $menuTitleHover !important;
				i {
					color: $menuTitleHover !important;
				}
			}
			div,
			span {
				height: 50px;
				line-height: 50px;
			}
		}
		// 设置所有菜单 静态背景展示
		.submenu-title-noDropdown,
		.el-submenu__title,
		.nest-menu .el-menu-item {
			&:hover {
				background-color: transparent;
			}
		}
		// 设置所有菜单 激活文字展示
		.is-active.submenu-title-noDropdown,
		.is-active > .el-submenu__title {
			color: $menuActiveText !important;

			i {
				color: $menuActiveText !important;
			}
		}

		// 无子集的激活菜单背景
		.is-active.submenu-title-noDropdown {
			background: $menuActiveBg;
		}
		// 有子集的激活菜单背景
		.is-opened .nest-menu .is-active {
			background: $menuActiveBg !important;
		}
	}

	.has-logo {
		.el-scrollbar {
			height: calc(100% - 80px);
		}
	}

	.el-menu--collapse .el-menu .el-sub-menu {
		min-width: $sideBarWidth !important;
	}

	/* 有子菜单 */
	.el-menu--collapse .is-active > .el-submenu__title::before {
		position: absolute;
		top: 0;
		left: 2px;
		width: 2px;
		height: 100%;
		background-color: $menuActiveBefore;
		content: "";
		clear: both;
		transition: all 0.2s ease-in-out;
		transform: translateY(0);
	}

	/* 无子菜单 */
	.el-menu--collapse .is-active.submenu-title-noDropdown::before {
		position: absolute;
		top: 0;
		width: 2px;
		height: 100%;
		background-color: $menuActiveBefore;
		content: "";
		clear: both;
		transition: all 0.2s ease-in-out;
		transform: translateY(0);
	}

	/* 设置过渡效果 */
	.el-menu--collapse .el-submenu > .el-submenu__title::before,
	.el-menu--collapse .submenu-title-noDropdown::before {
		position: absolute;
		top: 0;
		left: 2px;
		width: 2px;
		height: 100%;
		content: "";
		clear: both;
		transition: all 0.28s ease-in-out;
		transform: translateY(0);
	}

	/* siadebar折叠 */
	.hideSidebar {
		.main-container {
			margin-left: $hideSideBarWidth;
		}
		.sidebar-container {
			width: $hideSideBarWidth !important;
		}

		.el-menu--collapse {
			width: $hideSideBarWidth;
			// 无子菜单坐标设置 （不管激活未激活都取消了背景色）
			.submenu-title-noDropdown {
				padding: 0 !important;
				position: relative;
				background: transparent !important;

				.el-tooltip {
					padding-left: 16px !important;
				}
			}
			// 有子菜单坐标设置 并隐藏文字及下拉角标
			.el-submenu {
				& > .el-submenu__title {
					padding-left: 16px !important;
					& > span,
					.el-submenu__icon-arrow {
						height: 0;
						width: 0;
						overflow: hidden;
						visibility: hidden;
						display: inline-block;
					}
				}
			}
		}
	}
}

/* vertical菜单折叠 */
.el-menu--vertical {
	.el-menu--popup {
		background-color: $menuBg !important;
		/* 一级子菜单静态 及 hover效果 */
		.el-menu-item {
			span {
				font-size: 12px;
				margin-left: 10px;
			}
			height: 50px;
			line-height: 50px;
			color: $menuText;
			padding: 0 20px 0 40px;
			&:hover {
				color: $menuTitleHover !important;
				background-color: transparent;
				i {
					color: $menuTitleHover !important;
				}
			}
		}
		/* 一级子菜单激活态 */
		.is-active.el-menu-item {
			transition: color 0.3s;
			color: $menuActiveText !important;
			background: $menuActiveBg !important;
			i {
				color: $menuActiveText !important;
			}
		}
	}
}
